D10 - 小白初次見面 JavaScript - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 10

Modern Web

小白大戰基礎網頁開發系列第 10 篇

D10 - 小白初次見面 JavaScript

14th鐵人賽

arieltyit122

2022-09-25 02:32:26

728 瀏覽

分享至

過了這幾天的努力, 我們學到了什麼呢?

如何使用 HTML5 為網頁編寫內容
如何使用 CSS 向網頁添加樣式並將 CSS 文件與 HTML 文件串接起來

在學會以上的知識與實作後, 已經可以做出一個有模有樣的網頁了, 但這個網頁不會動, 是靜態的, 使用者無法與網頁互動。使用者想要與網頁互動, 需要寫入 Javascript 這個魔術師讓網也可以動起來。我們在 D2 有提到 HTML 像是靜態的白色骷顱人, 給予骷顱人 CSS 的點綴後變成有色彩衣著配件裝飾的靜態骷顱人, 接著有了 Javascript 的魔法施展後, 就是底下圖片看到會動會跳的骷顱人, 彷彿有了靈魂活了起來。

Behavior

網頁開發四大元素:

Content (words, images)
Structure/Meaning (HTML)
Style/Appearance (CSS)
Behavior

客戶端語言 (Client-Side Scripting):

只需要一個 web 瀏覽器! Code that runs on the user's computer and does not need a server to run.
客戶端 JavaScript 作為瀏覽器加載 HTML 和 CSS（like from a server response) 過程的一部分在運行。JavaScript 通常通過 event handlers 來操控頁面或回應使用者的操作。

What is JavaScript?

A lightweight "scripting" programming language
由 Brendan Eich 於 1995 年創建, 而最初的原型是在 10 天內創建的，名為 LiveScript
除了名稱和一些語法相似性之外，JavaScript 與 Java 並 無關係…
用來定義網頁間的交互性

Write Javascript functions to…

在 HTML 中插入動態文本（例如, 使用者名稱）
對事件做出反應（例如，頁面加載、用戶的鼠標點擊）
獲取有關使用者電腦的訊息（例如，使用什麼瀏覽器）
請求頁面所需的其他數據（例如，from an API → 之後我們會再介紹）

Simple Javascript statement:

console.log

console.log("message");
/* output values to the browser console, most often used to debug JS programs. You can think of this as System.out.println in Java or print in Python. */

alert function

alert("message");
/* A JS function that pops up a dialog box with a message - not ideal in practice, but sometimes a recommended debugging too
*/


alert("The browser sends greetings to you!");

如何寫Javascript 註解 (comment)?

// single-line comment
/**
 * multi-line
 * comment
 */


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Comment</title>
  </head>
  <body>
    <p>Paragraphs</p>

    <!-- 寫在 body closing tag 之前 -->
    <script>
      // 單行註解 (single-line comment)
      /*
        多行註解
        multi-line comment
      */
      var x = 2;
      var y = 3;
      var z = x + y;
    </script>
  </body>
</html>

3 comment syntaxes 回顧:

HTML: 
CSS/Java/JS: /* comment */
Java/JS: // single comment
/* multi-line comment */

此外, 使用在 functions 和 program files 的 commets 會使用 JSDoc comment: @param 和 @returns
之後我們會在 Code Quality 專題的部分做介紹

Variables:

variable 用 let keyword 來聲明
variable 命名規則: 駝峰式大小寫
大家可能還會看到使用 var 而不是 let, 不過這是一個比較舊的用法, scope 比較弱, 所以不要在任何地方使用 var

Types:

動態型別: JavaScript 不必特別宣告變數的型別, 型別會自動轉換。

let level = 30; // Number
let accuracyRate = 0.99; // Number
let name = "Pikachu"; // String
let temps = [55, 65, 60.5]; // Array


var pig = 2;    // pig 目前是數字
var pig = 'Oink'; // pig 目前是字串
var pig = true;  // pig 目前是布林值

Defining Functions:

// template
//Statements placed into functions can be evaluated in response to user events
function name(params) {
  statement;
  statement;
  ...
  statement;
}
// example
function myFunction() {
  console.log("Hello World!");
  alert("Your browser sends greetings to you!");
}

以上可以是串接到我們 HTML 頁面的 basics.js 的內容

JS Function vs Java Method:

function repeat(str, n) {
  let result = str;
  for (let i = 1; i < n; i++) {
    result += str;
  }
  return result;
}
let repeatedStr = repeat("echo...", 3); // "echo...echo...echo..."

Java

public static String repeat(String str, int n) {
  String result = str;
  for (int i = 1; i < n; i++) {
    result += str;
  }
  return result;
}
String repeatedStr = repeat("echo...", 3); // "echo...echo...echo..."

JS Function vs. Python Function

function repeat(str, n) {
  let result = str;
  for (let i = 1; i < n; i++) {
    result += str;
  }
  return result;
  }
  let repeatedStr = repeat("echo...", 3); // "echo...echo...echo..."
}

Python

def repeat(str, n):
  result = str;
  for i in range(1, n):
    result = result + str;
  return result;
  
  repeatedStr = repeat("echo...", 3) // "echo...echo...echo..."